<template>
  <div class="article-list">
    <vue-loadmore
      :on-refresh="onRefresh"
      :on-loadmore="onLoad"
      :finished="finished"
    >
      <template v-for="item in lists">
       <div :key="item.id">
         <article-item :item="item" :key="item.id"></article-item>
       </div>
      </template>
    </vue-loadmore>
  </div>
</template>

<script>
import ArticleItem from "@/components/ArticleItem.vue";
export default {
  components: {
    ArticleItem,
  },
  data() {
    return {
      page: 1,
      pageSize: 10,
      finished: false,
      lists: [],
      list_data: [
        {
          id: 0,
          category: "新闻圈",
          type: "special",
          author: "胖子",
          created_at: "31分钟前",
          content:
            " 近日，俄军最高统帅部组织了第五届全军炮兵旅预备队实地演练，出动了大批重型火炮，其中就包括当今口径最大的自行迫击炮——2S4“郁金香”240毫米自行迫击炮。本图集就此解读。",
          comment: 24,
          laud: 23,
          display: 999,
          images: ["https://img01.yzcdn.cn/vant/apple-1.jpg"],
        },
        {
          id: 1,
          category: "新闻圈",
          type: "normal",
          author: "胖子",
          created_at: "31分钟前",
          title: "鹿晗公开恋情！陆地夫妇成笑话，迪丽热巴反击酷爆！",
          content:
            " 近日，俄军最高统帅部组织了第五届全军炮兵旅预备队实地演练，出动了大批重型火炮，其中就包括当今口径最大的自行迫击炮——2S4“郁金香”240毫米自行迫击炮。本图集就此解读。",
          comment: 24,
          laud: 23,
          display: 999,
          images: ["https://img01.yzcdn.cn/vant/apple-1.jpg"],
          is_top: true,
        },
        {
          id: 2,
          category: "新闻圈1",
          type: "normal",
          author: "胖子",
          created_at: "31分钟前",
          title: "鹿晗公开恋情！陆地夫妇成笑话，迪丽热巴反击酷爆！",
          content:
            " 近日，俄军最高统帅部组织了第五届全军炮兵旅预备队实地演练，出动了大批重型火炮，其中就包括当今口径最大的自行迫击炮——2S4“郁金香”240毫米自行迫击炮。本图集就此解读。",
          comment: 24,
          laud: 23,
          display: 999,
          images: ["https://img01.yzcdn.cn/vant/apple-1.jpg", "https://img01.yzcdn.cn/vant/apple-2.jpg", "https://img01.yzcdn.cn/vant/apple-1.jpg"],
        },
      ],
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    onRefresh(done) {
      this.lists = [];
      this.page = 1;
      this.finished = false;
      this.fetch();

      done();
    },

    onLoad(done) {
      if (this.page <= 10) {
        this.fetch();
      } else {
        // all data loaded
        this.finished = true;
      }
      done();
    },

    fetch() {
      if (this.page < this.pageSize) {
        for (var item in this.list_data) {
          this.lists.push(this.list_data[item]);
        }
      }
      this.page++;
    },
  },
};
</script>

<style scoped>
body {
  background: #fff;
}
</style>